<template>
	<view class="main">
		<view class="video-wrap">
			<swiper :indicator-dots="true" class="scrollView">
				<swiper-item v-if="lesson.l_vedio">
					<video class="video" :src="lesson.l_vedio"></video>
				</swiper-item>
				<swiper-item v-if="lesson.l_img">
					<image class="video" :src="lesson.l_img"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="info-wrap">
			<view class="info">
				<view class="lesson-info">
					<view class="summary">
						<text class="title">{{ lesson.l_title }}</text>
						<text class="date">{{ lesson.l_date }}</text>
					</view>
					<view class="promote">
						<view class="discount">
							<text class="now">{{ lesson.l_cprice }}</text>
							<text class="before" v-if="lesson.l_preprice != '￥0'">{{ lesson.l_preprice }}</text>
						</view>
						<view class="statistic">
							<text class="enrolled">
								<span v-if="lesson.l_entered">已报名{{ lesson.l_entered }}</span>
							</text>
							<view class="quota">
								<text class="msg">剩余名额</text>
								<text class="num">{{ lesson.l_remain }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="service" v-if="service.service_list.length">
				<view class="title">{{ service.service_title }}</view>
				<view class="item">
					<text v-for="(serv, idx) in service.service_list" :key="idx">{{ serv.s_name }}</text>
				</view>
			</view>
		</view>
		<view class="tab-wrap" id="scroll-hook">
			<view>
				<v-anchor ref="tabs" :tabs="tabs" :fixedtop="fixedtab" @tab="handleScroll"></v-anchor>
			</view>
			<view>
				<view>
					<view>
						<v-tab-wrap-lesson :teachers="teachers" :outlines="outlines" @moreOutline="moreOutline" :outlines_no_more="outlines_no_more"
						 :comments="comments" @moreComment="moreComment" :comment_no_more="comment_no_more" :details="details" :instucts="instucts"></v-tab-wrap-lesson>
					</view>
					<!-- <view><v-tab-wrap-lesson v-if="tabs.currentTab === 'Lesson'"></v-tab-wrap-lesson></view> -->
					<!-- <view><v-tab-wrap-outline v-if="tabs.currentTab === 'Outline'"></v-tab-wrap-outline></view> -->
					<!-- <view><v-tab-wrap-discuss v-if="tabs.currentTab === 'Discuss'"></v-tab-wrap-discuss></view> -->
					<!-- <view><v-tab-wrap-introduce v-if="tabs.currentTab === 'Introduce'"></v-tab-wrap-introduce></view> -->
				</view>
			</view>
		</view>
		<!-- <v-bar-tab @click="navTo('lesson-ucar')"></v-bar-tab> -->
		<v-preset-bar-tab :course="course" @isshow="isshow" @showPhone="showPhone"></v-preset-bar-tab>
		<neil-modal :show="show1" @close="closeModal()" title="退费协议" :auto-close="false" @cancel="bindBtn('cancel')" @confirm="bindBtn('confirm')">
			<view class="uni-form-item uni-column" style="height: 600upx;">
				<scroll-view style="height: 100%;" scroll-y="true">
					<view style="padding: 20upx;" v-html="strings"></view>
				</scroll-view>
			</view>
		</neil-modal>
		<!-- for share -->
		<uni-popup :animation="true" ref="share" type="bottom" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">
					分享
					<i class="iconfont iconguanbi" @click="cancel()"></i>
				</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image"><i class="iconlessonfont" :class="item.icon"></i></view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import anchor from './components/anchor';
	import bartab from './components/bartab.vue';
	import barpreset from './components/detail-preset-bar.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	/* 4个选项卡组件 */
	import tabWrapLesson from './components/tab-wrap-lesson';
	import tabWrapOutline from './components/tab-wrap-outline';
	import tabWrapDiscuss from './components/tab-wrap-discuss';
	import tabWrapIntroduce from './components/tab-wrap-introduce';
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	/* 引入工具集 */
	import util from '@/common/util.js';

	export default {
		data() {

			return {
				course_id: 1,
				course: null,
				resource: {
					type: 2,
					src: ''
				},
				lesson: {
					l_img: null,
					l_vedio: null,
					l_title: '2019语文中考必备复习方法',
					l_date: '4.12-5.20丨每周四丨15:00-17:00丨6节课',
					l_cprice: '免费',
					l_preprice: '￥1280',
					l_entered: '1204',
					l_remain: '15'
				},
				service: {
					service_title: '服务项目',
					service_list: []
				},
				teachers: [],
				details: [], // 详情内容{title： content：} 格式
				outlines: [], // 课程大纲列表
				outlines_temp: [], // 课程大纲临时列表
				outlines_no_more: false, // 课程大纲显示更多按钮
				comments: [], // 评论列表
				comment_no_more: false, // 评论显示更多
				instucts: [], // 报课须知列表
				tabs: {
					items: {
						Lesson: '课程',
						Outline: '大纲',
						Discuss: '评价',
						Introduce: '须知'
					},
					keys: ['Lesson', 'Outline', 'Discuss', 'Introduce'],
					currentTab: 'Lesson'
				},
				bottomData: [{
						text: '微信',
						icon: 'icon-weixin'
					},
					{
						text: '朋友圈',
						icon: 'icon-pengyouquan'
					},
					{
						text: 'QQ',
						icon: 'icon-qq'
					},
					{
						text: '微博',
						icon: 'icon-weibo'
					}
				],
				fixedtab: false,
				hookList: [0],
				scrollTop: 0,
				show1: false,
				strings: ''
			};
		},
		components: {
			vAnchor: anchor,
			vTabWrapLesson: tabWrapLesson,
			vTabWrapOutline: tabWrapOutline,
			vTabWrapDiscuss: tabWrapDiscuss,
			vTabWrapIntroduce: tabWrapIntroduce,
			vBarTab: bartab,
			vPresetBarTab: barpreset,
			uniPopup,
			neilModal
		},
		onLoad(e) {
			//退费协议
			this.getInfo()
			var _vm = this;
			// 没有course_id
			if (!e.course_id) {
				console.error("没有course_id")
				return uni.showToast({
					title: '无数据',
					icon: 'none',
					complete() {
						setTimeout(uni.navigateBack, 500);
					}
				});
			}
			this.course_id = +e.course_id
			uni.showLoading({
				mask: true,
				title: '加载中'
			});
			// 请求课程详情
			this.$zbapi.apiPost(`stu/course/info/${this.course_id}`, {}).then(res => {
				// 空数据判断, 返回空数组
				if (Array.isArray(res.data) && res.data.code != 0) {
					uni.showToast({
						title: '无数据',
						icon: 'none',
						complete() {
							setTimeout(uni.navigateBack, 500);
						}
					});
					return;
				}
				if (res.data.code == 0) {
					// 数据传入支付组件
					this.course = res.data.data;
					this.lesson = {
						l_title: res.data.data.course_title,
						// l_date: '4.12-5.20丨每周四丨15:00-17:00丨6节课',
						l_date: [new Date(res.data.data.teach_start_day * 1000).format('MM.dd'), new Date(res.data.data.teach_end_day *
							1000).format('MM.dd')].join('-'),
						l_cprice: res.data.data.course_real_price ? '￥' + res.data.data.course_real_price / 100 : '免费',
						l_preprice: '￥' + (res.data.data.course_price && res.data.data.course_price / 100),
						l_entered: res.data.data.apply_count || 0,
						l_remain: res.data.data.course_store,
						l_img: res.data.data.media_img_url,
						l_vedio: res.data.data.media_video_url
					};
					this.teachers = res.data.data.teacher_list.map(x => ({
						t_id: x.teacher_id,
						t_avatar: x.figureimg,
						t_name: x.teacher_name,
						t_tags: x.impression || ' ',
						t_seria: '教师资格证编号：' + x.certificate_no || '教师资格证编号：无'
					}));
					// 服务项目列表内容
					res.data.data.course_tag && this.$set(this.service, 'service_list', res.data.data.course_tag.split(',').map(tag =>
						({
							s_name: tag
						})));
					this.details = [{
							title: '适应人群',
							content: res.data.data.course_people
						},
						{
							title: '课程简介',
							content: res.data.data.course_description || '暂无课程简介~'
						},
						{
							content: res.data.data.course_content
						}
					];
					// 获取课程大纲
					this.$zbapi.apiPost(`stu/course/outline/infos/${this.course_id}`, {}).then(res => {
						if (res.data.code == 0) {
							var temp = res.data.data.map((x, i) => ({
								lessonth: '第' + ++i + '课',
								lessonType: x.course_service_type == 2 ? '录播' : '直播',
								title: x.detail_title,
								isfree: !!x.is_free
							}));
							// 课程大纲的显示是获取到所有，所以限制显示靠前端控制(限制显示4个，点击查看更多再添加进去)
							if (temp.length > 4) {
								this.outlines_temp = temp.slice(4);
								temp.splice(4);
							} else {
								temp.no_more = true;
							}
							this.outlines = temp;
							this.outlines.templist = this.outlines_temp
							this.updateHook();
						} else {
							console.error('获取课程大纲异常 =：', res);
						}
					});
					// 获取评论列表
					this.$zbapi.apiPost(`stu/course/commentlist/infos/${this.course_id}`, {
						page: 1,
						limit: 4
					}).then(res => {
						if (res.data.code == 0) {
							this.comments = res.data.data.list.map((x, i) => ({
								id: x.order_id,
								avatar: x.headimg,
								name: x.student_name,
								time: x.create_time && new Date() - x.create_time * 1000,
								comment: x.comment,
								score: x.score
							}));
							this.updateHook();
						} else {
							console.error('获取课程评论异常 =：', res);
						}
					});
					// 获取报课须知列表
					this.$zbapi.apiPost('stu/course/instruction/infos').then(res => {
						if (res.data.code == 0) {
							this.instucts = res.data.data.map((x, i) => ({
								title: x.question,
								content: x.answer
							}));
							this.instucts[this.instucts.length - 1].status = 0
							this.updateHook();
						} else {
							console.error('获取报课须知异常 =：', res);
						}
					});
					uni.hideLoading();
				}
			});
			uni.hideLoading();
		},
		onNavigationBarButtonTap(e) {
			console.log('click nav bar btn : ', e);
			this.togglePopup();
		},
		methods: {
			getInfo() {
				uni.request({
					url: 'http://api.zhizhuedu.cn/api/v1/explain/info/1',
					method: 'GET',
					success: (res) => {
						this.strings = res.data.data.content
					}
				});
			},
			showPhone() {
				uni.showModal({
					content: '联系电话：07568599961',
					showCancel: false,
					confirmColor: '#FF9900'
				})
			},
			isshow() {
				this.show1 = true;
			},
			closeModal() {
				this.show1 = false;
			},
			bindBtn(type) {
				if (type == 'confirm') {
					uni.navigateTo({
						url: 'lesson-order'
					});
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			shareTo(target) {
				switch (target) {
					case 'wx':
						console.log('%cshare to wechat', 'color:#3CB035');
						break;
					case 'wx_moments':
						console.log('%cshare to wx moments', 'color:#3CB035');
						break;
					case 'qq':
						console.log('%cshare to qq', 'color:#55ADEC');
						break;
					case 'wb':
						console.log('%cshare to weibo', 'color:#F25252');
						break;
					default:
						console.log('%cnone share', 'color:gray');
				}
			},
			togglePopup(open, video_id) {
				this.$refs['share'].open();
				console.log('share refs ==> ', this.$refs['share']);
			},
			cancel() {
				// 关闭弹窗
				this.$refs['share'].close();
			},
			handleTab(i) {
				// 1,0 ==> 0
				i && (i -= 1);
				if (this.tabs.currentTab !== this.tabs.keys[i]) this.$set(this.tabs, 'currentTab', this.tabs.keys[i]);
			},
			moreOutline() {
				console.log("before moreOutline := ", this.outlines)
				if (!this.outlines_no_more) {
					var temp = this.outlines.concat(this.outlines.templist)
					this.outlines = temp;
					this.outlines_no_more = true;
					this.outlines.no_more = true;
				}
				console.log("after moreOutline := ", this.outlines)
			},
			moreComment() {
				if (this.comments.length < 4) {
					this.comment_no_more = true
					return this.$set(this.comments, 'no_more', true)
				}
				this.$zbapi.apiPost('stu/course/commentlist/infos/', {
					page: this.comments.length % 10 + 1,
					limit: 10
				}, [this.course_id]).then(res => {
					if (res.code == 0) {
						if (this.comments.length < 10) {
							this.comments = res.data.list.map((x, i) => ({
								id: x.order_id,
								avatar: x.headimg,
								name: x.student_name,
								time: x.create_time && new Date() - x.create_time * 1000,
								comment: x.comment,
								score: x.score
							}));
							this.updateHook();
						}
					} else {
						console.error('加载更多课程评论异常 =: ', res);
					}
				});
			},
			updateHook() {
				this.hookList = [0];
				// 记录hooker
				for (var _i in Array(4).fill(1)) {
					uni.createSelectorQuery()
						.select('#scroll-hook-' + _i)
						.boundingClientRect(data => {
							this.$nextTick(e => {
								data && this.hookList.push(data.top); //滑动位置计算：获取元素当前在页面中的位置 加上 页面滚动后 的 页面位置
							});
						})
						.exec();
				}
			},
			handleScroll(val) {
				uni.pageScrollTo({
					scrollTop: this.hookList[val.index + 1] - 90,
					duration: 100
				});
			}
		},
		// 监听页面滚动
		onPageScroll(e) {
			var _top = e.scrollTop,
				_offset = 90;
			this.scrollTop = e.scrollTop;
			if (this.hookList.length > 1) {
				this.fixedtab = e.scrollTop + _offset / 3 > this.hookList[1];
			}
			for (var i in this.hookList) {
				if (i == this.hookList.length - 1) return this.handleTab(this.hookList.length - 1);
				if (e.scrollTop + _offset >= this.hookList[+i] && e.scrollTop + _offset < this.hookList[+i + 1]) {
					return this.handleTab(i);
				}
			}
		}
	};
</script>

<style>
	@import url('../../static/font_lesson/iconfont.css');

	page {
		background: #F7F7F7;
	}

	.main {
		font-family: Source Han Sans CN;
		padding-bottom: 110upx;
	}

	.main /deep/ img {
		width: 100%;
	}

	.video-wrap {
		height: 422upx;
	}

	.scrollView {
		height: 100%;
		width: 100%;
		white-space: nowrap;
	}

	.video {
		width: 100%;
		height: 422upx;
	}

	.lesson-info {
		display: flex;
		flex-direction: column;
	}

	.summary {
		display: flex;
		flex-direction: column;
	}

	.summary .title {
		font-size: 34upx;
		font-weight: bold;
		color: #333;
	}

	.summary .date {
		font-size: 24upx;
		color: #999;
		font-weight: 400;
	}

	.promote {
		display: flex;
		margin-top: -10upx;
	}

	.promote .discount {
		display: flex;
		align-items: center;
		align-items: flex-end;
	}

	.discount .now {
		height: 56upx;
		font-size: 36upx;
		color: #ff9900;
	}

	.discount .before {
		margin: 10upx 0 0 20upx;
		font-size: 26upx;
		color: #999;
		text-decoration: line-through;
	}

	.discount .before span {
		vertical-align: sub;
	}

	.promote .statistic {
		flex: 1;
		text-align: right;
		color: #666;
	}

	.statistic .enrolled {
		font-size: 24upx;
		color: #666;
	}

	.statistic .quota {
		font-size: 24upx;
	}

	.statistic .msg {
		width: 112upx;
		line-height: 40upx;
		background: #ffb800;
		color: #fff;
		border: 2upx solid #ffb800;
		border-radius: 8upx 0 0 8upx;
		display: inline-block;
		text-align: center;
	}

	.statistic .num {
		width: 72upx;
		line-height: 40upx;
		color: #ff9900;
		border: 2upx solid #ffb800;
		border-radius: 0 8upx 8upx 0;
		display: inline-block;
		text-align: center;
	}

	.info-wrap {
		padding: 0 30upx;
	}

	.info-wrap .info {
		padding: 40upx 0 30upx;
	}

	.info-wrap .service {
		padding: 6upx 0;
		display: flex;
		font-size: 26upx;
		border-top: 2upx solid #e5e5e5;
	}

	.title {
		color: #999;
	}

	.item {
		color: #333;
		margin-left: 6upx;
	}

	.service .item text {
		padding: 0 14upx;
		border-right: 2upx solid #999;
	}

	.service .item text:last-child {
		border-right: none;
	}

	.icon-weixin {
		background: #3cb035;
		color: #fff;
	}

	.icon-pengyouquan {
		background: #3cb035;
		color: #fff;
	}

	.icon-qq {
		background: #55adec;
		color: #fff;
	}

	.icon-weibo {
		background: #f25252;
		color: #fff;
	}

	/* 底部分享 */
	.uni-share {
		height: 434upx;
		background: #fff;
	}

	.uni-popup__mask {
		opacity: 0.3;
	}

	.uni-share-title {
		line-height: 60upx;
		color: #333;
		font-size: 34upx;
		padding: 15upx 0;
		text-align: center;
		border-bottom: 2upx solid #e5e5e5;
		font-family: Source Han Sans CN;
		font-weight: 500;
	}

	.uni-share-title i {
		position: absolute;
		right: 30upx;
		top: 10upx;
		color: #999;
	}

	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		height: 346upx;
		align-items: center;
	}

	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}

	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80upx;
		height: 80upx;
		overflow: hidden;
		border-radius: 50%;
	}

	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}

	.uni-share-content-image i {
		font-size: 52upx;
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 80upx;
	}

	.uni-share-content-text {
		font-size: 28upx;
		padding-top: 10upx;
		padding-bottom: 10;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999;
	}

	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 2upx #f5f5f5 solid;
		text-align: center;
		color: #666;
	}

	.tab-wrap {
		border-top: 10upx solid #fafafa;
	}
</style>
